<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绝对定位和相对定位</title>
    <style type="text/css">
        /*:nth-child(n)是筛选到第n个标签元素
            但是这种筛选方式是有条件的:
            1.筛选的元素名称和元素的编号必须一致;
            2.筛选的元素假如中间插入的有其他元素,则会导致编号发生变化;
        */
        div:nth-child(1){
            width: 500px;
            height: 500px;
            background-color: orange;
            margin: 50px;
        }

        div:nth-last-of-type{

        }

        /*:nth-of-type(n);筛选第n个指定的标签元素,不用关注该元素的编号
            :nth-last-of-type;筛选到最后一个.
        */
        div:nth-of-type(2){
            width: 500px;
            height: 500px;
            background-color: purple;
            margin: 50px;
            /*设置了absolute的子元素,需要对其父元素也设置一个定位类型,推荐使用relative.*/
            position: relative;
        }

        /*div p代表找到div元素下所有后代元素中的标签
            div > p代表找到div元素下直接的子元素
        */
        div:nth-of-type(1) > p{
            width: 100px;
            height: 100px;
            background-color: red;
            /*任何一个元素在布局的时候,默认都是相对于父元素来布局的,
            如果想要让某一个元素发生一个位移,需要设置定位类型.

            在css样式中,常用的定位类型有绝对定位(absolute)和相对定位(relative).
            relative是相对于元素原来的位置发生一个偏移.一般用于位置的微调.
            */
            position: relative;
            left:100px;
            top:100px;
        }

        div:nth-of-type(2) > p{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*absolute是参考父元素来进行定位的一种方式,使用绝对定位,需要注意一点:
                假如子元素要参照父元素进行定位,则父元素也必须设置一个定位类型,否则子元素会参照body来进行定位.
                还需要注意一点,一旦元素设置了absolute,则元素脱离当前的布局流.元素原来的位置会被后面的元素挤占.
            */
            position: absolute;
            left:100px;
        }
    </style>

</head>
<body>
    <div>相对定位
        <p>这是一个p标签</p>
    </div>
    <div>
        绝对定位
        <p>这是第二个p标签</p>
    </div>
</body>
</html>